<template>
  <div>
    <van-row class="top">
      <van-col span="2"></van-col>
      <van-col span="8">
        <div class="icon">
          <img
            src="https://img.ddtouxiang.com/upload/touxiang/20230331/0331192112181.png_preview.jpg"
          /></div
      ></van-col>
      <van-col span="2"></van-col>
      <van-col span="12">
        <ul class="information">
          <li>
            <div>姓名:</div>
            <div>胖虎</div>
          </li>
          <li>
            <div>性别:</div>
            <div>男</div>
          </li>
          <li>
            <div>年龄:</div>
            <div>18</div>
          </li>
          <li>
            <div>省份:</div>
            <div>黑龙江</div>
          </li>
        </ul>
      </van-col>
    </van-row>
    <ul class="list">
      <li v-for="item in list" :key="item">
        <span class="item-2">{{ item }}111</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'OwnDoc',
  components: {},
  data() {
    return {
      list: ['出生史：', '发育史：', '家族史：', '既往史：', '药物史：']
    }
  }
}
</script>

<style scoped>
.top {
  /* display: flex; */
  justify-content: space-between;
  margin-top: 20px;
}
.icon {
  width: 100px;
  height: 100px;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.information {
  width: 230px;
  font-size: 18px;
}
.information > li {
  margin-top: 10px;
}
.information > li > div {
  height: 16px;
  line-height: 16px;
  margin-right: 10px;
}
/*  */
.list {
  margin-top: 80px;
  font-size: 20px;
}
.list > li {
  /* justify-content: space-between; */
  align-items: center;
  margin: 16px 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid black;
}
li {
  display: flex;
}
.item-1 {
  flex-grow: 1;
}
.item-2 {
  flex-grow: 10;
}
</style>